<template>
    <rx-layout>
        <div slot="center">
            <a-form :form="form" style="height: 100%;">
                <a-row>
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.fieldKey','字段标识')">
                            <a-select :placeholder="i18n('form.fieldKey','字段标识')" :options="fieldDatas" v-decorator="['fieldName',{rules: [{ required: true, message: i18n('form.fieldKey','字段标识','input')}] }]" @change="fieldChange"></a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.prompts','空文本提示')">
                            <rx-input-i18n :placeholder="i18n('form.prompts','空文本提示')" v-decorator="['emptytext']" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="showDefault">
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.remarks','字段备注')">
                            <a-input :placeholder="i18n('form.remarks','字段备注')"  v-decorator="['fieldLabel',{rules: [{ required: true, message:i18n('form.remarks','字段备注','input')}] }]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.typeComparison','比较类型')">
                            <a-select :placeholder="i18n('form.typeComparison','比较类型')" :options="opData" v-decorator="['fieldOp']"></a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="!showDefault">
                    <a-col :span="24">
                        <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.remarks','字段备注')">
                            <a-input :placeholder="i18n('form.remarks','字段备注')" v-decorator="['fieldLabel',{rules: [{ required: true, message: i18n('form.remarks','字段备注','input') }] }]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.format','格式化')">
                            <a-select :placeholder="i18n('form.format','格式化')" :options="formatAry" v-decorator="['format']"></a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="showDefault">
                    <a-col :span="24">
                        <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1"  :label="rowi18n('form.default','默认值')">
                            <month-default-set v-model="defaultVal" :selectAry="selectAry" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="showRelation">
                    <div><b>
                        {{i18n('form.relaValue','相对值')}}
                    </b></div>
                    <div>
                        <span @click="addField"><my-icon type="iconxinzeng"></my-icon>
                            {{i18n('form.relaValueAdd','添加相对值')}}
                        </span>
                        <span style="padding-left:25px" @click="addDefaultFields('month')"><my-icon type="iconxinzeng"></my-icon>
                            {{i18n('form.relaValueLoad','加载默认相对值')}}
                        </span>
                    </div>
                    <div v-for="(fieldData,index) in gridData" :key="index" class="gridData">
                        <div @click="removeField(index)"><my-icon type="iconoffline"></my-icon></div>
                        <div>
                            <a-input :disabled="fieldData.isDefault" v-model="fieldData.label" />
                        </div>
                        <div style="margin-right: 5px" v-show="!fieldData.isDefault">
                            <span @click="configField(fieldData,'month')"><a-icon type="setting" style="margin-right: 2px"/>
                                {{$ti18('rxList.config','配置')}}
                            </span>
                            <a-tag color="green" style="margin-right: 0px" v-if="fieldData.setting">
                                {{i18n('isMap.set','已设置')}}
                            </a-tag>
                            <a-tag color="red" style="margin-right: 0px" v-else>
                                {{i18n('isMap.notSet','未设置')}}
                            </a-tag>
                        </div>
                    </div>
                </a-row>
            </a-form>
        </div>
    </rx-layout>

</template>

<script>
    import {RxLayout,MonthDefaultSet,RxInputI18n} from "@lowcode/jpaas-common-lib";
    import miniQuery from './miniQuery';
    import {relationTypeList} from './miniQueryRelationDefault';
    export default {
        name: "miniQuery_month",
        mixins:[miniQuery],
        components:{
            RxLayout,
            MonthDefaultSet,
            RxInputI18n
        },
        data() {
            return {
                formatAry:[
                    {label:'YYYYMM',value:'YYYYMM'},
                    {label:'YYYY/MM',value:'YYYY/MM'},
                    {label:'YYYY-MM',value:'YYYY-MM'}
                ],
                defaultVal:"",
                selectAry:relationTypeList['month']
            }
        },
        methods: {
            i18n(name, text, key) {
                return this.$ti18(name, text, "miniQuery", key);
            },
            rowi18n(name, text, key) {
                return this.$ti18(name, text, "rowControls", key);
            },
            customSetData() {
                var defaultValConf=this.mdl.defaultValConf;
                if(defaultValConf){
                    this.defaultVal=JSON.parse(defaultValConf).defaultVal;
                }
            },
            customGetData(){
                var defaultValConf={type:'month',defaultVal:this.defaultVal,format:this.mdl.format};
                this.mdl.defaultValConf=JSON.stringify(defaultValConf);
            },
        }
    }
</script>

<style scoped>
    .gridData{
        display: flex;
        margin-bottom: 7px;
    }
    .gridData>div:nth-child(1){
        font-size: 20px;
        margin-right: 4px;
        cursor: pointer;
    }
    .gridData>div:nth-child(2){
        width: 50%;
        overflow: hidden;
        line-height: 30px;
    }
    .gridData>div:nth-child(3){
        flex: 1;
    }
</style>